<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />

<title>Getting Started with Sencha Touch</title>

<link rel="stylesheet" type="text/css" href="examples/resources/shared/css/style.css" media="all" />
</head>
<body>
<a href="http://www.sencha.com/" id="logo">Sencha Touch - HTML5 Mobile Application Framework</a>

<h1> Sencha Touch入门</h1>

<p>本文档介绍了如何开始使用Sencha Touch。它说明使用Sencha Touch创建基于触摸设备的Web应用程序的基本步骤。此外，它还提供了用于创建GeoTweets示例应用程序的详细步骤，这是一个应用程序的例子，包含在Sencha Touch发行包中。</p>

<p>本文档是写给想要快速开始使用Sencha Touch创建基于触摸设备的Web应用程序的Web开发人员。它假设你已经下载了Sencha Touch库。有一个正确安装和配置的Web服务器，并比较熟悉Web应用开发和概念，如JavaScript、HTML、层叠样式表（CSS）、Web服务器等等。</p>

<p>本文件包含以下部分:</p>
	<ul>
    <li><a href="#Intro">Sencha Touch简介</a></li>
		<li><a href="#MainSteps">使用Sencha Touch：主要步骤</a></li>
		<li><a href="#DetailedSteps">使用Sencha Touch：创建GeoTweets应用程序的详细步骤</a></li>
		<li><a href="#Summary">总结和进一步阅读</a></li>
	</ul>

<h2><a name="Intro"></a>Sencha Touch简介</h2>
<p>Sencha Touch 是一个用于创建基于触摸设备的Web应用程序的JavaScript框架。对于Sencha Touch，你可以使用你已经拥有的技能，以最小的努力创造一个优雅的和一致的用户体验。Sencha Touch使用如HTML和CSS的技术，提供高质量的应用体验，而不需要插件。</>

<h2><a name="MainSteps"></a>使用Sencha Touch：主要步骤</h2>

<ol>
<li><a href="#MainSetUp">建立你的环境</a></li>
	<li><a href="#MainCreateHTML">创建HTML文件</a></li>
	<li><a href="#MainCreateJS">创建Application JavaScript文件</a></li>
	<li><a href="#MainTest">测试应用程序</a></li>
	<li><a href="#MainUpdateForProd">更新应用程序于上线</a></li>
	<li><a href="#MainPutIntoProd">应用程序上线</a></li>
</ol>
<p>要使用Sencha Touch创造基于触摸装置的JavaScript应用程序，请按照下列的主要步骤:</p>
<ol>
<h3><li><a name="MainSetUp"></a>建立你的环境</li>
</h3>
		<ul>
			<li>下载Sencha Touch库.</li>
			<li>确保你的开发环境已建立.</li>
			<li>确保你的开发和上线运行Web服务器正确安装和配置.</li>
			<li>知道你想使用的应用程序的CSS文件名称,当您在下一步中创建应用程序的HTML文件，你将需要这个文件名称.</li>
		</ul>

	<h3><li><a name="MainCreateHTML"></a>创建HTML文件</li>
	</h3>
		<p>在您选择的编辑器，为你的应用程序创建HTML文件。对于一个应用程序的HTML文件的示例可以参考: <a href="#DetCreatingHTML">详细的步骤：创建HTML文件</a>.</p>
		<p>该应用程序的HTML文件位于你指定的链接:</p>
			<ul>
				<li>默认Sencha Touch级联样式表（CSS）文件,ext-touch.css.</li>
				<li>应用的CSS文件,例如, <strong><em>mycss</em>.css</strong>.</li>
				<li>你希望使用应用程序的Sencha Touch库的版本.
				    <p>Sencha 建议你:
					<ul>
						<li>在应用程序开发和测试阶段使用库的调试版本ext-touch-debug.js。调试版本可以帮助您检测和故障诊断错误，以及清楚地看到出现      的库错误.</li>
						<li>在应用上线前,更改HTML文件链接到上线运行的版本库,ext-touch.js,欲了解更多信息,请参阅 <a href="#MainUpdateForProd">更新应用程序于上线</a>.
				  </p></ul></li>
				<li>应用程序的JavaScript文件，你将会在下一步中创建。例如, <strong><em>myapp</em>.js</strong>.</li>
			</ul>
		<p>保存一个逻辑名称的HTML文件,如myapp.html。在完成编写应用程序,并把它放入你的本地Web服务器上,你将浏览器指向你本地Web        服务器上的这个文件名称,以便查看和测试应用程序.</p>

	<h3>
	  <li><a name="MainCreateJS"></a>创建应用程序的JavaScript文件</li></h3>
		<ul>
			<li>在你选择的编辑器，为你的应用程序创建JavaScript文件。关于应用程序的JavaScript文件示例，请参见 <a href="#DetCreatingJS">Creating the Application JavaScript File</a>.</li>
			<li>用你所需的名称和.js扩展名保存文件。例如，myapp.js。在HTML文件里链接上一步创建的这个文件.</li>
		</ul>

	<h3>
	  <li><a name="MainTest"></a>测试应用程序</li></h3>
		<p>若要测试你的应用程序:
		<ol>
			<li>上传库文件到Web服务器上的目标目录.</li>
			<li>上传应用程序文件（HTML、JS和CSS）和所有引用的文件到Web服务器上的目标目录.</li>
			<li>指向你的浏览器到http://localhost:8080/myapp.html，其中:
				<ul>
					<li><em>localhost</em> 是Web服务器的主机名称或IP地址</li>
					<li><em>8080</em> 是Web服务器的端口号</li>
					<li><em>myapp.html</em>是应用程序HTML文件的名称</li>
				</ul>
		</ol>
		</p>

	<h3>
	  <li><a name="MainUpdateForProd"></a>更新应用程序于上线</li></h3>
		<p>当你完成测试你的应用程序，更改应用程序的HTML文件以指向Sencha Touch库的上线的版本，操作如下:			</p>
		<ol>
	<li>打开HTML文件.</li>
				<li>找到指定Sencha Touch库的代码. 例如:</li>
	<pre>
	&lt;!-- Sencha Touch JS --&gt;
	&lt;script type=&quot;text/javascript&quot; src=&quot;../../ext-touch-debug.js&quot;&gt;&lt;/script&gt;
	</pre>
				<li>用ext-touch.js 替换ext-touch-debug.js. <strong>ext-touch.js</strong> 是为应用上线进行过优化的.压缩,不包含文档.
				</li>
				<li>保存HTML文件.</li>
			</ol>
		</p>

	<h3>
	  <li><a name="MainPutIntoProd"></a>应用程序上线</li></h3>
		<p>当你的应用程序已经为上线准备好,只要把应用程序的源文件和任何其他应用程序引用的文件的副本放在你的Web服务器上就可以发布应用了. </p>
</ol>

<h2><a name="DetailedSteps"></a>使用 Sencha Touch: 创建GeoTweets应用程序的详细步骤</h2>
	<p>本节扩展了在上一节所描述的逐步建立一个Sencha Touch应用程序过程的主要步骤,这应用程序完整的源代码，GeoTweets，可以在Sencha Touch发布包的/examples/guide子目录下找到.
<p>该GeoTweets应用程序演示如何能够非常容易地使用Sencha Touch来创建一个简单但功能强大的应用程序. 应用程序:
<ul>
<li>使用 Geolocation 从Twitter找到附件的 tweets.</li>
		<li>标签卡方式在地图和列表视图上显示 tweets.</li>
		<li>应用程序的用户在卡片之间切换时,使用一个特殊的动画效果.</li>
	</ul>
	以下各节描述了应用程序的HTML和JavaScript文件，分成以下的步骤实现应用程序代码的创建.
	</p>

<ul>
		<li><a href="#DetCreatingHTML">创建HTML文件</a></li>
		<li><a href="#DetCreatingJS">创建应用程序JavaScript文件</a></li>
		<li><a href="#DetTest">测试应用程序</a></li>
		<li><a href="#DetUpdate">更新应用程序于上线</a></li>
		<li><a href="#DetProd">应用程序上线</a></li>
	</ul>

<h3><a name="DetCreatingHTML"></a>创建HTML文件</h3>
<p>创建一个Sencha Touc应用程序的第一步是创建一个HTML文件,链接Sencha Touch、应用程序CSS文件、Sencha Touch库和应用程序JavaScript文件.</p>
<p>GeoTweets应用程序HTML文件是index.html，其内容如下:</p>

<pre>
 &lt;!DOCTYPE html&gt;
 &lt;html&gt;
 &lt;head&gt;
     &lt;meta charset=&quot;utf-8&quot;&gt;
     &lt;title&gt;GeoTweets&lt;/title&gt;

	 &lt;!-- Sencha Touch CSS --&gt;
	 &lt;link rel=&quot;stylesheet&quot; href=&quot;../../resources/css/ext-touch.css&quot; type=&quot;text/css&quot;&gt;

	 &lt;!-- Custom CSS --&gt;
	 &lt;link rel=&quot;stylesheet&quot; href=&quot;css/guide.css&quot; type=&quot;text/css&quot;&gt;

	 &lt;!-- Google Maps JS --&gt;
	 &lt;script type=&quot;text/javascript&quot; src=&quot;http://maps.google.com/maps/api/js?sensor=true&quot;&gt;&lt;/script&gt;

	 &lt;!-- Sencha Touch JS --&gt;
	 &lt;script type=&quot;text/javascript&quot; src=&quot;../../ext-touch-debug.js&quot;&gt;&lt;/script&gt;

	 &lt;!-- Application JS --&gt;
	 &lt;script type=&quot;text/javascript&quot; src=&quot;src/index.js&quot;&gt;&lt;/script&gt;


 &lt;/head&gt;
 &lt;body&gt;&lt;/body&gt;
 &lt;/html&gt;
</pre>

<p>GeoTweets应用程序HTML文件链接到这5个文件:</p>
<ul>
<li>Sencha Touch默认的CSS样式表 (<strong>ext-touch.css</strong>).</li>
	<li>自定义应用程序的CSS (<strong>guide.css</strong>).</li>
		<p>这份文档没有描述详细的CSS文件,因为它的属性是直接的,应该不言自明. 此外,本文件假设您熟悉Web应用程序的概念,如CSS.</p>
	<li>谷歌地图库 (<strong>http://maps.google.com/maps/api/js?sensor=true</strong>).</li>
	<li>Sencha Touch库 (在开发和测试阶段，使用Sencha Touch库的调试版本, <strong>ext-touch-debug.js</strong>).</li>
		<p>该库的调试版本是未压缩的,且包含文档.这可能是有益的,如果出现错误,它可以让你清楚地看到,在库中的错误发生.通常,在上线时,你会使用ext-touch.js，这是这对上线发布优化的库版本.	</p>
	<li>应用程序JavaScript文件 (<strong>index.js</strong>).</li>

</ul>
<p><strong>注</strong>:请注意,在HTML文件的&lt;body&gt;标记是空的.这是因为Sencha Touch通过JavaScript自动生成网页内容.</p>

<h3><a name="DetCreatingJS"></a>创建应用程序 JavaScript 文件</h3>
<p>一旦你创建了HTML文件,你就可以创建应用程序JavaScript文件了.本节显示了应用程序JavaScript文件的全部内容,以及分成以下的步骤实现应用程序代码的创建.</p>

<p>该GeoTweets应用程序JavaScript文件是index.js,其内容如下:</p>

<pre>
Ext.setup({
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon: false,
    onReady: function() {
        var timeline = new Ext.Component({
            title: 'Timeline',
            cls: 'timeline',
            scroll: 'vertical',
            tpl: [
                '&lt;tpl for=&quot;.&quot;&gt;',
                    '&lt;div class=&quot;tweet&quot;&gt;',
                            '&lt;div class=&quot;avatar&quot;&gt;&lt;img src=&quot;{profile_image_url}&quot; /&gt;&lt;/div&gt;',
                            '&lt;div class=&quot;tweet-content&quot;&gt;',
                                '&lt;h2&gt;{from_user}&lt;/h2&gt;',
                                '&lt;p&gt;{text}&lt;/p&gt;',
                            '&lt;/div&gt;',
                    '&lt;/div&gt;',
                '&lt;/tpl&gt;'
            ]
        });

        var map = new Ext.Map({
            title: 'Map',
            getLocation: true,
            mapOptions: {
                zoom: 12
            }
        });

        var panel = new Ext.TabPanel({
            fullscreen: true,
            animation: 'slide',
            items: [map, timeline]
        });

        var refresh = function() {
            var coords = map.geo.coords;

            Ext.util.JSONP.request({
                url: 'http://search.twitter.com/search.json',
                callbackKey: 'callback',
                params: {
                    geocode: coords.latitude + ',' + coords.longitude + ',' + '5mi',
                    rpp: 30
                },
                callback: function(data) {
                    data = data.results;

                    // Update the tweets in timeline
                    timeline.update(data);

                    // Add points to the map
                    for (var i = 0, ln = data.length; i < ln; i++) {
                        var tweet = data[i];

                        // If the tweet is geo-tagged, use that to display marker
                        if (tweet.geo && tweet.geo.coordinates) {
                            var position = new google.maps.LatLng(tweet.geo.coordinates[0], tweet.geo.coordinates[1]);
                            addMarker(tweet, position);
                        }
                    }
                }
            });
        };

        // These are all Google Maps APIs
        var addMarker = function(tweet, position) {
            var marker = new google.maps.Marker({
                map: map.map,
                position: position
            });
        };

        map.geo.on('update', refresh);

        var tabBar = panel.getTabBar();
        tabBar.addDocked({
            xtype: 'button',
            ui: 'mask',
            iconCls: 'refresh',
            dock: 'right',
            stretch: false,
            align: 'center',
            handler: refresh
        });

    }
});
</pre>

<p>在GeoTweets 应用程序文件中JavaScript代码的定义:</p>
<ul>
<li>应用程序卡,时间表和地图.时间表卡被定义为Ext.Component,并在一个列表上显示 tweets.该地图卡是Ext.Map的组件,它在地图上显示 tweets的位置.</li>
<li>TabPanel组件,被称为面板,包含两个选项卡:时间表（显示为时间表卡）和地图（显示为地图卡）,卡之间切换采用动画过渡.</li>
	<li><strong>refresh</strong>和<strong>addMarker</strong> 功能. refresh功能从Twitter那里更新数据. <strong>addMarker</strong> 功能确定显示在地图卡上的Twitter的地理位置.</li>
	<li>自定义刷新按钮.</li>
</ul>

<p><strong>注</strong>: 在此应用程序中，使用以下的语法创建组件:</p>

<pre>    <strong>var</strong> <em>objectName</em> <strong>= new Ext.</strong><em>ComponentName</em><strong>({</strong>
        <em>objectDefinition</em>
    <strong>});</strong> </pre>

<p>其中:</p>
	<ul>
    <li><em>objectName</em>是用于引用该对象的变量名.</li>
		<li><em>ComponentName</em>是对象的类名称.</li>
		<li><em>objectDefinition</em> 定义对象的属性和行为.</li>
	</ul>

<p>以下各节通过这些步骤创建应用程序脚本.</p>

<ul>
<li><a href="#DetBeginApp">开始应用程序脚本文件</a></li>
	<li><a href="#DetTimeline">定义 Timeline卡</a></li>
	<li><a href="#DetMap">定义 Map 卡</a></li>
	<li><a href="#DetPanel">定义Tab面板组件</a></li>
	<li><a href="#DetGetData">从Twitter获取数据</a></li>
	<li><a href="#DetAddMarkers">在地图上添加Tweet 标记</a></li>
	<li><a href="#DetAddRefreshEv">添加刷新事件</a></li>
	<li><a href="#DetAddCustomBtn">在标签栏添加自定义刷新按钮</a></li>
</ul>

<h4><a name="DetBeginApp"></a>开始应用程序脚本文件</h4>

<p>在你选择的编辑器,开始编写应用程序脚本.JavaScript应用程序文件的代码(index.js)第一行如下:</p>

<pre>Ext.setup({
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon: false,
    onReady: function() {
</pre>

<p>该Ext.setup方法设置一个触摸功能设备的使用页面.它允许你为你的应用程序设置不同的开始属性和行为.如需Sencha Touch API的详细资料,包括此方法,请参阅 <a href="http://www.sencha.com/deploy/touch/docs/">Sencha Touch API Documentation</a>.</p>

<p>GeoTweets的应用程序代码指定以下启动属性:
<ul>
<li><strong>tabletStartupScreen</strong> 属性. 指定图标文件的名称,用作平板电脑上应用程序的开始屏幕.</li>
<li><strong>phoneStartupScreen</strong> 属性. 指定图标文件的名称,用作手机设备上应用程序的开始屏幕.</li>
<li><strong>icon</strong> 属性. 指定应用程序的默认图标文件名, <em>icon.png</em>.
</li>
<li><strong>glossOnIcon</strong> 属性. 指定是否要被应用到默认图标的光泽效果。在这种情况下，该值设置为false，表示默认图标不增加光泽.
</li>
<li><strong>onReady</strong> 方法. 指定函数来运行,当浏览器的文档对象模型（DOM）准备好之后,应用程序的HTML文件已加载.<br>
在onReady方法中的功能,可以定义应用程序代码的其余部分,如下面的章节的解释.该应用程序代码的其余部分包括
:
</p>
</li>
<ul>
  <li><strong>timeline</strong> 卡的列表中显示 tweets</li>
<li><strong>map</strong> 卡的地图中显示 tweets</li>
<li><strong>panel</strong> Ext.TabPanel 容器组件</li>
<li><em>refresh</em> 功能用于更新卡片中的tweet 数据</li>
<li><em>addMarker</em> 功能用于指定显示
tweeters的地理位置</li>
<li>在标签栏上的刷新按钮，使用刷新功能获取Twitter的最新数据，并在卡里重新显示</li>
</ul>

<h4><a name="DetTimeline"></a>定义 Timeline 卡片</h4>

<p><strong>timeline</strong> 卡片在列表视图中显示 tweets . 通过数据和其他组件或部件的通用壳 <em>Ext.Component</em>创建.</p>

<p> <strong>timeline</strong> 卡 <em>Ext.Component</em> 的JavaScript 代码如下:</p>

<pre>    var timeline = new Ext.Component({
        title: 'Timeline',  // Name that appears on this tab
        cls: 'timeline',    // The CSS class. Lets you style elements on the timeline.
        scroll: 'vertical', // Make it vertically scrollable
        tpl: [              // Set up a template to display tweet data
          '&lt;tpl for="."&gt;',
            '&lt;div class="tweet"&gt;',
              '&lt;div class=&quot;avatar&quot;&gt;&lt;img src=&quot;{profile_image_url}&quot; /&gt;&lt;/div&gt;', // Tweeter's picture
              '&lt;div class="tweet-content"&gt;',
                '&lt;h2>{from_user}&lt;/h2&gt;',       // Tweeter's name
                '&lt;p>{text}&lt;/p&gt;',              // Tweeter's message
              '&lt;/div&gt;',
            '&lt;/div&gt;',
        '&lt;/tpl&gt;'
       ]
    });
</pre>

<p><strong>timeline</strong> 卡片 <em>Ext.Component</em>:</p>
<ul>
	<li>定义了三个属性控制该卡的外观:
	<ul>
		<li><strong>title</strong> 属性. 指定 <strong>Timeline</strong>的标签显示内容.</li>
		<li><strong>cls</strong> 属性. 指定 CSS 类,在 timeline上的设计样式元素.</li>
		<li><strong>scroll</strong> 属性. 指定该 <em>Ext.Component</em> 的滚动方向.在该应用中, 它被设置为'垂直'，使卡垂直滚动. 对于其他可能的值可以参阅<a href="http://www.sencha.com/deploy/touch/docs/">Sencha Touch API Documentation</a>. </li>
	</ul>
	</li>
	<li>定义一个显示 tweets的模板.Sencha Touch使用模板在组件里动态地呈现信息.</li>
</ul>

<p>这个模板根据从Twitter来的数据更新 <strong>timeline</strong>卡组件. 模板tags, <em>profile_image_url</em>, <em>from_user</em>, and <em>text</em> are 包含在 ({})中,并匹配 以JSON 格式储存的Twitter数据.  <em>Ext.util.JSONP.request</em> 方法用于检索数据.</p>

<p>在应用程序CSS文件guide.css中，你可以设置和更改类的方式，这个类在模板的代码中定义，并在设备屏幕上出现.</p>

<p>图显示了一个典型的时间表卡,这个应用程序可能会有如下的显示:</p>

<img src="examples/resources/shared/getting-started/timeline.jpg" border=5></li>

<h4><a name="DetMap"></a>定义 Map 卡</h4>
<p><strong>map卡用于显示附件的</strong> tweets.</p>
<p> <strong>map</strong> card的<em>Ext.Map</em> component的 JavaScript如下:</p>

<pre>    var map = new Ext.Map({
        title: 'Map',        // Name that appears on this tab
        getLocation: true,   // Gets user's current location
        mapOptions: {        // Used in rendering map
          zoom: 12
        }
    });
</pre>

<p><em>Ext.Map</em> 通过一个 Ext.Component.创建一个 Google Map 组件,与其他Ext组件一样，Ext.Map组件定义了控制该卡外观的属性:
<ul>
<li><strong>title</strong> 属性. 指定 <strong>Map</strong> 显示的标签. </li>
	<li><strong>getLocation</strong> 属性.利用地理定位工具来自动获取应用程序的用户位置，并设置它作为地图的中心. </li>
</ul>
<p><em>Ext.Map</em> 还指定了mapOptions，用于绘制的地图。该mapOptions作为Ext.Map组件的一部分，直接传递给谷歌地图的对象。如需有关这些选项和<br>
</p>
<p>谷歌地图API的信息，请参阅谷歌地图: <a href="http://code.google.com/apis/maps/documentation/v3/reference.html">Google Maps API Documentation</a>.</p>

</p>
在这个例子中，缩放选项指定初始地图缩放级别，它设置为12.
</p>

<p>map卡的效果图如下:</p>
<img src="examples/resources/shared/getting-started/map.jpg" border=5></li>

<h4><a name="DetPanel"></a>定义 Tab 棉板组件</h4>
<p><em>Ext.TabPanel</em> 是一个容器组件，拥有应用程序显示的对象。在这种情况下，TabPanel组件包含两个先前定义的 <strong>timeline</strong>和 <strong>map</strong>组件，自动添加选<br>
</p>
<p>项卡和卡（组件）上面的指定名称（<strong>Timeline</strong>和 <strong>Map</strong>），并提供卡之间的转换逻辑.</p>
<p>该<em>Ext.TabPanel</em> 应用程序的代码如下:</p>
<pre>    var panel = new Ext.TabPanel({
        fullscreen: true,            // The panel will take up the full rather than partial screen
        cardAnimation: 'slide',       // Special effect for switching between cards
        items: [map, timeline]       // Components (cards) that the tabs correspond with
    });
</pre>

<p><strong>TabPanel</strong> 卡组件定义了3个属性，以控制选项卡面板的外观:
	<ul>
		<li><strong>fullscreen</strong>选项.指定该组件将会占满全屏幕的宽度和高度，并自动呈现组件到页面.
		</li>
		<li><strong>cardAnimation</strong> 属性.在卡片之间切换,时指定使用的幻灯片特殊效果动画.
		</li>
		<li><strong>items</strong> 属性.指定先前定义的组件对象（卡），添加到这个容器.
		</li>
	</ul>
</p>

<p>下图是在应用程序的卡之间切换的效果:</p>
<img src="examples/resources/shared/getting-started/panel.jpg" border=5><p>还有其他过渡效果可以使用改变卡，如flip，wipe，cube，pop等等。有关更多详细信息，请参阅Ext.anims类的API文档 <a href="http://www.sencha.com/deploy/touch/docs/?class=Ext.anims">the API documentation</a>.</p>

<h4><a name="DetGetData"></a>从Twitter获取数据</h4>
<p>应用程序启动以及无论何时在应用程序再次按刷新按钮（其中在后面的部分定义）时，刷新函数被调用。该函数使外部请求，以收集Twitter的<br>
</p>
<p>数据。它还调用一个addMarker函数，获取添加标记的地理数据，在地图上显示tweeter 位置。</p>
<p>应用程序文件中相应的代码如下:</p>
<pre>
    var refresh = function() {                           // Define the refresh function

      var coords = map.geo.coords;                       // Define a coords variable from the maps geolocation
      Ext.util.JSONP.request({                           // Make an external call using JSONP
        url: 'http://search.twitter.com/search.json',    // to this URL
        callbackKey: 'callback',                         // Set the required Twitter callback parameter
        params: {
          geocode: coords.latitude + ',' + coords.longitude + ',' + '5mi', // Get lat, long, and radius
          rpp: 30                                        // Number of tweets per page
        },
      callback: function(data) {                         // Provide structure to hold data from Twitter callback
        data = data.results;                             // Hold Twitter info in variable called data
        timeline.update(data.results);                   // Update the tweets in timeline

        for (var i = 0, ln = data.length; i &lt; ln; i++) { // Loop to add points to the map
          var tweet = data[i];                           // Get data for a single tweet

          if (tweet.geo &amp;&amp; tweet.geo.coordinates) {      // If the tweet is geo-tagged, use that to display marker
            var position = new google.maps.LatLng(tweet.geo.coordinates[0], tweet.geo.coordinates[1]);  // Get coords
            addMarker(tweet, position);                  // Call addMarker function with new data
          }
        }
      }
    });
  };
</pre>
<p>该Ext.util.JSONP.request提供了一种简单的方式实现JSON 调用Twitter，为此，你通过:
<ul>
	<li>url选项.此选项指定这个URL,你想让外部调用使用JSONp.相应的代码是:
	  <pre>url: 'http://search.twitter.com/search.json',</pre>
	</li>
	<li><strong>callbackKey</strong>. 这个函数在返回数据时运行.
	</li>
	<li><strong>params</strong> (parameters). 这些参数直接传递到请求并为附近的Twitter执行基本搜索。相应的代码是:
	  <pre>
	params: {
	          geocode: coords.latitude + ',' + coords.longitude + ',' + '5mi',
          rpp: 30
    </pre>
</li>
<p>这个具体参数用于为附近的 tweets运行一个基本的搜索:</p>
	<ul>
		<li><strong>geocode</strong> 参数, 为应用程序用户获取 tweets5英里半径之内的位置.
		</li>
		<li><strong>rpp</strong> 参数, 指定返回一个数据页的tweets数（在这个情况下是30）.
		</li>
	</ul>
</ul>

<p><strong>注意 </strong><strong>geocode</strong>和<strong>rpp</strong> 参数是由 <a href="http://apiwiki.twitter.com/Twitter-Search-API-Method%3A-search">Twitter Search API</a>指定.</p>


<p>回调函数接收来自Twitter的数据，并将其存储在数据变量里. 它首先用tweets列表更新 <strong>timeline卡</strong>. 回想一下，在 <a href="#DetTimeline">timeline card</a>组件中定义的模板查找{profile_image_url}、{from_user}和{text}，所有这些都是在结果中定义了.</p>
<p>应用程序回调函数的代码如下:</p>
<pre>
callback: function(data) {
        data = data.results;
        timeline.update(data.results);
</pre>

<p>以下是从Twitter回来的原始数据的例子:</p>
<pre>{&quot;results&quot;:
[{&quot;profile_image_url&quot;:&quot;"http://a1.twimg.com/profile_images/704555348/boat3_normal.jpg...
&quot;from_user&quot;:&quot;jonathanjulian&quot;,...
&quot;text&quot;:&quot;@agnellvj have a look at the most intense #extjs book to be published do far!&quot;,
...</pre>

for循环检查经历Twitter数据每次一个Twitter和检查地理标记。如果Tw eet是地理标记，那么纬度和经度坐标存储在位置变量里，并传递给addMarker函数，它添加Tweet到地图上.
</p>
<p>相应的代码如下:</p>
<pre>
 for (var i = 0, ln = data.length; i &lt; ln; i++) {
           var tweet = data[i];

           if (tweet.geo &amp;&amp; tweet.geo.coordinates) {
             var position = new google.maps.LatLng(tweet.geo.coordinates[0], tweet.geo.coordinates[1]);
            addMarker(tweet, position);
</pre>


<h4><a name="DetAddMarkers"></a>增加 Tweet 标记到地图上</h4>
<p><em>addMarker</em> 函数根据位置增加 tweets到地图上.这个函数的处理逻辑几乎与 <a href="http://code.google.com/apis/maps/documentation/v3/">Google Maps API</a> 相同，而非由 Sencha Touch指定.</p>
<p>相应代码如下:</p>

<pre>   var addMarker = function(tweet, position) {        // Define addMarker function
            var marker = new google.maps.Marker({          // Define variable to hold marker data
            map: map.map,
            position: position,
        });
    }
</pre>

<h4><a name="DetAddRefreshEv"></a>添加刷新事件</h4>
<p>刷新函数每次运行，在地图里的地理定位工具都被更新。因为你在地图组件设置了getLocation: true，页面已加载后，刷新立即运行，并检索应用程序的用户位置。</p>
<p>在刷新运行时的相应代码如下:</p>
<pre>
    map.geo.on('update', refresh);
</pre>

<p><strong>注</strong>: Twitter API往往是缓存的数据，定期刷新，这意味着每次用户点击刷新按钮，新的鸣叫可能不会始终显示.</p>

<h4><a name="DetAddCustomBtn"></a>在标签栏添加自定义刷新按钮r</h4>

<p>添加自定义刷新按钮到标签栏，首先用下面的代码检索TabPanel的TabBar部分:</p>
<pre>
    var tabBar = panel.getTabBar();
</pre>

<p>下面的图像显示 Tab Bar.</p>

<img src="examples/resources/shared/getting-started/tabbar.png" border=5>

<p>本节介绍了一种技术，创建自定义刷新按钮，作为在GeoTweets应用程序标签栏上的对接项目.</p>

<p>为了添加一个按钮到TabBar，通过直接传递一个对象到addDocked函数创建组件。通过在此对象里使用xtype属性，你可以创建新按钮的飞行与内联代码。此功能被发现在整个库。在你通常会插入一个组件或部件的任何地方，你也可以使用一个平面对象、配置属性和xtype属性。使用该技术是一种生成接口的快速方法，它也可以减少维护.</p>

<pre>
    tabBar.addDocked({
        xtype: 'button',          // Specifies an instance of the button class
        ui: 'mask',              // Appearance, for example, "light", "dark", etc.
        iconCls: 'refresh',       // CSS class for the button
        dock: 'right',            // Puts the new button at the right of the tab bar
        stretch: false,           // Prevents the button from stretching to full height of tab bar
        align: 'center',          // Centers the button vertically within the tab bar
        handler: refresh          // Refreshes the current card when users tap
    });
</pre>

<p>通过几个属性控制停靠对象的布局。该GeoTweets应用程序使用以下属性:
	<ul>
		<li><strong>ui</strong> 属性.控制用户界面的外观.
		</li>
		<li><strong>iconCls</strong> 属性. 指定按钮的CSS类.
		</li>
		<li><strong>dock</strong> 属性。控制一个停靠对象的水平（从左到右）位置。在这个例子中，它被设置为'right'，它位于标签栏右侧的按钮水平上.
		</li>
		<li><strong>stretch</strong> 属性。定义是否停靠对象维持一个固定的高度，还是当标签栏的高度大小变化时，它的高度跟着延伸。在这个例子中，该属性设置为false，它指定的停靠按钮保持一个固定的高度，无论标签栏是否改变大小.
		</li>
	  <li><strong>align</strong>属性。控制一个停靠对象的垂直（从上到下）位置。在这个例子中，属性设置为'center'，其中标签栏上的对象垂直居中.<br>
		</li>
	</ul>
<p>此外，当应用程序的用户点击按钮时，该handler函数被调用。在这个应用程序中，当按钮被点击时，我们指定refresh函数被调用. .</p>

<p>下图显示你定义的按钮:</p>
<img src="examples/resources/shared/getting-started/button.png" border=5>

<h3><a name="DetTest"></a>测试应用程序</h3>
<p>一旦你写完并保存应用程序的JavaScript文件，你已经准备好进行测试了。为此，按照测试应用程序的指示操作 <a href="#MainTest">Test the Application</a>.</p>

<h3><a name="DetUpdate"></a>更新应用程序于上线</h3>
<p>当你完成了测试你的应用程序，请按照<a href="#MainUpdateForProd">更新应用程序于上线</a>的指示，改变Sencha Touch库的调试版本成为上线版本.</p>

<h3><a name="DetProd"></a>应用程序上线</h3>

<p>当你准备好了发布的应用程序，按照 <a href="#MainPutIntoProd">应用程序上线</a>的操作发布应用程序.


<h2><a name="Summary"></a>总结和进一步阅读</h2>

<p>正如你可以看到的，使用Sencha Touch创建JavaScript Web应用程序是那么的快捷、简单！在Sencha Touch发布包，包含了许多你可以浏览和学习的其他例子。</p>
<p><br>
  有关本文件所涵盖的议题的进一步资料，请参阅: </p>
<ul>
<li><a href="http://www.sencha.com/deploy/touch/docs/">The Sencha Touch API Documentation</a></li>
	<li><a href="http://www.sencha.com/forum/">The Sencha Forums</a></li>
	<li><a href="http://www.sencha.com/">www.sencha.com</a></li>

	<li><a href="http://apiwiki.twitter.com/">The Twitter API Documentation</a></li>
	<li><a href="http://code.google.com/apis/maps/documentation/v3/">The Google Maps API Documentation</a></li>
</ul>

<hr />

<p><small>This file last updated July 26, 2010.</small></p>

</body>
</html>
